<script>
export default {
  data() {
    return {
      todos: [
        {
          id: 124,
          title: '内容1',
          completed: false
        },
        {
          id: 123,
          title: '内容2',
          completed: true
        }
      ],
      visibility: 'all'
    }
  },
  methods: {
    toggleAll(e) {
      this.todos.forEach(todo => todo.completed = e.target.checked)
    },
    onHashChange() {
      const hash = window.location.hash.replace(/#\/?/, '')
      if (['all', 'active', 'completed'].includes(hash)) {
        this.visibility = hash
      }else {
        window.location.hash = ''
        this.visibility = 'all'
      }
    },
    addTodo (e) {
      const title = e.target.value.trim()
      if(!title) return
      this.todos.unshift({
        id: Date.now(),
        title,
        completed: false
      })
      e.target.value = ''
    },
    removeTodo(todo){
      this.todos.splice(this.todos.indexOf(todo),1)
    },
    clearCompleted(){
      this.todos = this.todos.filter(todo => !todo.completed)
    },
    editTodo(todo){
      todo.editing = true;
    }
  },
  computed:{
    filteredTodos (){
      switch(this.visibility){
        case 'all':
          return this.todos
        case 'active':
          return this.todos.filter(todo => !todo.completed)
        case 'completed':
          return this.todos.filter(todo => todo.completed)
      }
    },
    remaining(){
      switch(this.visibility){
        case 'all':
          return this.todos.length
        case 'active':
          return this.todos.filter(todo => !todo.completed).length
        case 'completed':
          return this.todos.filter(todo => todo.completed).length
      }
    }
  },
  mounted() {
    window.addEventListener('hashchange', this.onHashChange)
    // 刷新后重新进行hash值切换
    this.onHashChange()
  }
}
</script>

<template>
  <section class="todoapp">
    <header class="header">
      <h1>todos</h1>
      <input @keyup.enter="addTodo" class="new-todo" placeholder="What needs to be done?" autofocus>
    </header>
    <!-- This section should be hidden by default and shown when there are todos -->
    <section class="main">
      <input id="toggle-all" class="toggle-all" type="checkbox" @click="toggleAll">
      <label for="toggle-all">Mark all as complete</label>
      <ul class="todo-list">
        <!-- These are here just to show the structure of the list items -->
        <!-- List items should get the class `editing` when editing and `completed` when marked as completed -->
        <li v-for="todo in filteredTodos" :key="todo.id" :class="{ completed: todo.completed }">
          <div class="view">
            <input class="toggle" type="checkbox" checked v-model="todo.completed">
            <label>{{ todo.title }}</label>
            <button class="destroy" @click="removeTodo(todo)"></button>
          </div>
          <input class="edit" value="Create a TodoMVC template">
        </li>
      </ul>
    </section>
    <!-- This footer should be hidden by default and shown when there are todos -->
    <footer class="footer" v-show="todos.length">
      <!-- This should be `0 items left` by default -->
      <span class="todo-count"><strong>{{remaining}}</strong> {{remaining>1? "items":"item"}} left</span>
      <!-- Remove this if you don't implement routing -->
      <ul class="filters">
        <li>
          <a :class="{ selected: visibility === 'all' }" href="#/all">All</a>
        </li>
        <li>
          <a :class="{ selected: visibility === 'active' }" href="#/active">Active</a>
        </li>
        <li>
          <a :class="{ selected: visibility === 'completed' }" href="#/completed">Completed</a>
        </li>
      </ul>
      <!-- Hidden if no completed items are left ↓ -->
      <button class="clear-completed" @click="clearCompleted">Clear completed</button>
    </footer>
  </section>
</template>

<style>
@import "https://unpkg.com/todomvc-app-css@2.4.1/index.css";
</style>
